import logo from './logo.svg';
import './App.css';

import axios from 'axios';
import React, { useEffect, useState } from 'react';
function App() {
  const [links, setLinks] = useState([]);
  const [selectedLink, setSelectedLink] = useState('');

  useEffect(() => {
    // Fetch links from the backend
    axios.get('/links')
      .then(response => {
        setLinks(response.data);
      })
      .catch(error => {
        console.error('Error fetching links:', error);
      });
  }, []);

  const handleSubmit = () => {
    console.log('Selected Link:', selectedLink);
  };

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <div>
          <h1>Select a Link</h1>
          <select value={selectedLink} onChange={(e) => setSelectedLink(e.target.value)}>
            <option value="">Select a link</option>
            {links.map((link, index) => (
              <option key={index} value={link.url}>{link.name}</option>
            ))}
          </select>
          <button onClick={handleSubmit}>Submit</button>
        </div>
      </header>
    </div>
  );
}

export default App;
